<template>
  <div class="stars-container">
    <div class="stars" />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  const stars = document.querySelector('.stars')

  for (let i = 0; i < 800; i++) {
    const speed = 0.2 + (Math.random() * 1)
    const distance = 800 + (Math.random() * 300)
    const star = document.createElement('div')
    star.className = 'star'
    star.style.transformOrigin = `0 0 ${distance}px`
    star.style.transform = `
      translate3d(0, 0, -${distance}px)
      rotateY(${Math.random() * 360}deg)
      rotateX(${Math.random() * -50}deg)
      scale(${speed}, ${speed})
    `

    stars?.appendChild(star)
  }
})
</script>

<style>
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
.stars-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
  background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517b 40%, #e96f92  65%, #f7f7b6);
  background-attachment: fixed;
  overflow: hidden;
}
.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  perspective-origin: 50% 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  animation: rotate 90s infinite linear;
}
.star {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background-color: #f7f7b8;
  backface-visibility: hidden;
}
</style>
